<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<!-- 视图 -->
<input type="text" class="ipt">
<h3 class="show"></h3>

<script>
// 数据
var data = {
    msg: '',
    num: 123
}

// 监听数据变化并重新渲染视图
data._msg = data.msg;
Object.defineProperty(data,'msg',{
    configurable: true,
    enumerable: true,
    get(){
        // 访问msg属性时，自动触发
        console.log( 'getter...1' );
        return this._msg;
    },
    set(val){
        // 修改msg属性时，自动触发
        console.log( 'setter...2' );
        this._msg = val;
        // 数据变化，重新渲染视图
        render();
    }
});

var ipt = document.querySelector('.ipt');
var show = document.querySelector('.show');

// 渲染页面
function render(){
    ipt.value = data.msg;
    show.innerText = data.msg;
}

// 通过input修改数据
ipt.oninput = function (){
    data.msg = this.value;
}

console.log( data );

</script>
</body>
</html>